import { StyleSheet, View } from "react-native";

interface RatioIconProps {
  ratio: number;
  size?: number;
  color?: string;
  isSelected?: boolean;
}

export default function RatioIcon({
  ratio,
  size = 20,
  color = "#222",
  isSelected = false,
}: RatioIconProps) {
  // 严格按照比例计算内部矩形的尺寸
  let width, height;

  // 特殊处理：如果ratio=1，直接设置宽高为18
  if (ratio === 1) {
    width = 16;
    height = 16;
  } else {
    const maxSize = size; // 使用80%的容器大小确保边距

    if (typeof ratio === "string" ? Number(ratio) >= 1 : ratio >= 1) {
      // 横向矩形 (宽 >= 高)
      width = maxSize;
      height = maxSize / ratio;
    } else {
      // 纵向矩形 (高 > 宽)
      height = maxSize;
      width = maxSize * ratio;
    }
  }

  // 打印计算的宽度和高度
  console.log(
    `RatioIcon: ratio=${ratio}, size=${size}, width=${width}, height=${height}`
  );

  // 当选中时，使用F01D46颜色
  const displayColor = isSelected ? "#F01D46" : color;

  return (
    <View style={[styles.container]}>
      <View style={[ styles.inner, { width, height, borderColor: displayColor, borderWidth: 1.4 }]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center",
  },
  inner: {
    borderRadius: 2,
  },
});
